<% if can? :update, @event %>
  <%= render(:partial => 'events/form_poster', :locals => { :event => @event }) %>
<% end %>

<%= form_for @event || Event.new(:owner_id => profile_or_current_subject.actor_id, :interval => 1, :class => "form-group") do |f| %>
  <%= f.hidden_field :owner_id, :id=>"edit_event_owner_id"  %>
  <%= f.hidden_field :start_at, :id=>"edit_event_start_at" %>
  <%= f.hidden_field :end_at, :id=>"edit_event_end_at" %>
  <%= f.hidden_field :all_day, :id=>"edit_event_all_day" %>

  <!--TITULO-->
  <label><%= t('event.leyend.title')%></label>
  <%= f.text_field :title, :class => "form-control", :placeholder => t('event.title_input') %>
  
  <!--DESCRIPCION-->
  <label><%= t('event.leyend.description')%></label>
  <%= f.text_area :description, :rows => 5, :class => "form-control", :placeholder => t('event.description_input') %>

  <!--TYPE-->
  <label><%= t('event.leyend.type')%></label>
  <div class="checkbox">
   <label>
     <%= f.radio_button :streaming, false, checked: true, :id=>"edit_event_streaming_false" %> <span class="lbl padding-0"> <%= t('event.type.videoconference') %> </span>
   </label>
   <label>
      <%= f.radio_button :streaming, true, :id=>"edit_event_streaming_true" %> <span class="lbl padding-0"> <%= t('event.type.streaming') %> </span>
   </label>
  </div>
  <!--EMBED-->
  </br>
  <label><%= t('document.options.embed')%></label>
  <%= f.text_area :embed, :rows => 5, :class => "form-control", :placeholder => t('embed.input'), :disabled => true, :id=>"edit_event_embed" %>

  <%content_for :javascript do%>
    $("#document-edit #edit_event_streaming_false").on("click", function() {
      $("#document-edit #edit_event_embed").attr("disabled", true);
    });
    $("#document-edit #edit_event_streaming_true").on("click", function() {
      $("#document-edit #edit_event_embed").attr("disabled", false);
    });
    $("#document-edit #edit_event_streaming_true").on("click", function() {
      $("#document-edit #edit_event_embed").attr("disabled", false);
    });

    if ($("#document-edit #edit_event_streaming_true").is(':checked')) {
      $("#document-edit #edit_event_embed").attr("disabled", false);
    }
  <%end%>

  <!--DATE-->
  <label><%= t('event.leyend.date')%></label>
    <!-- <div id="editdate" class="input-append">
      <input class="form-control" data-format="yyyy-MM-dd" type="text" name="event_day"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar">
        </i>
      </span>
    </div> -->
    <div id="editdate" class="input-group">
      <input class="form-control" data-format="yyyy-MM-dd" type="text" name="event_day">
      <span class="input-group-addon">
        <i class="fa fa-calendar" data-time-icon="fa-time" data-date-icon="fa-calendar"></i>
      </span>
    </div>
  <!--HORA INICIO-->
  <label><%= t('event.leyend.start_time')%></label>
    <!-- <div id="edithourinit" class="input-append">
      <input class="form-control" data-format="hh:mm:ss" type="text" name="event_start_time"></input>
      <span class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar">
        </i>
      </span>
    </div> -->
    <div id="edithourinit" class="input-group">
      <input class="form-control" data-format="hh:mm:ss" type="text" name="event_start_time">
      <span class="input-group-addon">
        <i class="fa fa-clock-o" data-time-icon="fa-time" data-date-icon="fa-calendar"></i>
      </span>
    </div>
  <!--HORA FINALIZACION-->
  <label><%= t('event.leyend.end_time')%></label>
    <!-- <div id="edithourfinish" class="input-append">
      <input data-format="hh:mm:ss" type="text" name="event_end_time"></input>
      <span class="form-control" class="add-on">
        <i data-time-icon="icon-time" data-date-icon="icon-calendar">
        </i>
      </span>
    </div> -->
    <div id="edithourfinish" class="input-group">
      <input class="form-control" data-format="hh:mm:ss" type="text" name="event_end_time">
      <span class="input-group-addon">
        <i class="fa fa-clock-o" data-time-icon="fa-time" data-date-icon="fa-calendar"></i>
      </span>
    </div>

  <input type="button" class="btn btn-primary" value="<%= t('categories.save')%>"/>
  <%= f.submit t('categories.save'), :id => "edit_saveEvent", :class => "hidden" %>

  <script>
    document.addEventListener("DOMContentLoaded", function(){
      $(function() {
        $('#edithourinit').datetimepicker({
          pickDate: false
        });
      });
      $(function() {
        $('#edithourfinish').datetimepicker({
          pickDate: false
        });
      });
      $(function() {
        $('#editdate').datetimepicker({
          pickTime: false
        });
      });
      $("#event input[name='event_day']").val("<%=Time.at(@event.start_at).getutc.strftime('%Y-%m-%d')%>");
      $("#event input[name='event_start_time']").val("<%=Time.at(@event.start_at).getutc.strftime('%H:%M:%S')%>");
      $("#event input[name='event_end_time']").val("<%=Time.at(@event.end_at).getutc.strftime('%H:%M:%S')%>");
      // $('#editdate').data('datetimepicker').setLocalDate(new Date(Date.parse("<%=@event.start_at%>")));
      // $('#edithourinit').data('datetimepicker').setLocalDate(new Date(Date.parse("<%=@event.start_at%>")));
      // $('#edithourfinish').data('datetimepicker').setLocalDate(new Date(Date.parse("<%=@event.end_at%>")));

      var saveEventButton = $("#event input[type='submit']");
      var eventButton = $("#event input[value=<%= t('categories.save')%>][type='button'][class='btn btn-primary']");
      $(eventButton).click(function(event) {
        if ($("#event input[name='event[title]']").val() == "") {
          $("#event .errors").remove();
          $("#event .new_event").after("<div class='errors'><%= t('event.title_input')%></div>");
        } else {
          // $("#event input[name='event[start_at]']").val($("#event input[name='event_day']").val() + " " + $("#event input[name='event_start_time']").val());
          $("#event input[name='event[start_at]']").val(new Date(Date.parse($("#event input[name='event_day']").val().replace(/-/g,"/") + " " + $("#event input[name='event_start_time']").val())));
          if ($("#event input[name='event_end_time']").val() < $("#event input[name='event_start_time']").val()) {
            var d = new Date($("#event input[name='event_day']").val());
            d.setDate(d.getDate()+1);
            // $("#event input[name='event[end_at]']").val(d.getFullYear() + "-" + (d.getMonth()+1) + "-" + d.getDate() + " " + $("#event input[name='event_end_time']").val());
            $("#event input[name='event[end_at]']").val(new Date(Date.parse(d.getFullYear() + "/" + (d.getMonth()+1) + "/" + d.getDate() + " " + $("#event input[name='event_end_time']").val())).toUTCString());
          } else {
          //$("#event input[name='event[end_at]']").val($("#event input[name='event_day']").val() + " " + $("#event input[name='event_end_time']").val());
          $("#event input[name='event[end_at]']").val(new Date(Date.parse($("#event input[name='event_day']").val().replace(/-/g,"/") + " " + $("#event input[name='event_end_time']").val())).toUTCString());
          }
          $(saveEventButton).click();
        }
      });
    });
  </script>
  
<% end %>